ใช้ API Gateway เชื่อมต่อไปยัง Lambda เรียก API แปลภาษา : Serverless Web App บน AWS : Part 2

บทความนี้ดัดแปลงเนื้อหาบางส่วนมาจาก Hands-on Training ของ Website AWS Official ของญี่ปุ่น สามารถอ่านเนื้อหาต้นฉบับได้ที่ AWS Hands-on for Beginners Serverless #1 サーバーレスアーキテクチャで翻訳 Web API を構築する | AWS Webinar

บทความนี้เป็นส่วนนึงของเนื้อหาในบทเรียนเกี่ยวกับ AWS API Gateway ที่ผมสร้างขึ้นมา คุณผู้อ่านสามารถตรวจสอบเนื้อหาทั้งหมดได้โดยการคลิกที่ชื่อของผม

เป้าหมายใหญ่สุดของบทเรียนนี้คือ การทำ Web app แปลภาษาที่เป็น serverless ครับ

สวัสดีครับ ต้า ครับ

บทความนี้เป็นส่วนนึงของเนื้อหาในบทเรียนเกี่ยวกับ AWS API Gateway ที่ผมสร้างขึ้นมา
ซึ่งผมทำการแยกย่อยๆออกมาโดยเนื้อหาในบทความพวกนี้สามารถจบได้ในตัวของมันเอง

สำหรับหัวข้ออื่นๆ ของบทความนี้ สามารถตรวจสอบได้ที่ช่วงท้ายของบทความครับ

สำหรับบทความนี้เราจะมาทำกันในส่วนนี้ครับ

จะเป็นเกี่ยวกับการสร้าง API Gateway ไปเรียกใช้ Lambda ที่เราสร้างไว้ในพาร์ทที่แล้ว แล้วทำการแปลภาษาจาก API Gateway กันครับ

บทความนี้เราจะมาทำกันใน Singapore Region กันครับ

เริ่มลงมือทำ

สร้าง API Gateway

ให้เราสร้าง API Gateway จากลิ้งค์ด้านล่างนี้ครับ
Choose an API type

เลือก REST API
กด Build

◉New API
API name: translate_API
API endpoint type: Edge-optimized
กด Create API

การเลือก endpoint type ประเภท Edge-optimized จะเป็นการเข้าถึง API ผ่าน เส้นทางของ Edge เดียวกับ CloudFront ซึ่งทำให้การเข้าถึงได้เร็วขึ้น

กด Create resource ในหน้า API ของเรา

พิมพ์ในช่อง Resource name ว่า translate
กด Create resource

เลือก /translate
กด Create

Method type: GET
✅Lambda proxy integration
Lambda function: เลือก Lambda function ที่เราสร้างขึ้น

เลื่อนลงมาด้านล่าง กด Create method

สาเหตุที่เราเลือก Lambda proxy integration เพราะนี่เป็นวิธีที่เร็ว ในการสร้าง API endpoint ส่วนวิธีการใช้ Lmbda ที่เป็น 　non proxy จะมีให้ลองทำในบทความต่อไป

คราวนี้เรากลับมาที่ Lambda เพื่อแก้ไขโค้ดกันก่อน

กลับมาที่ Labmda fuction

ก็อบข้อความด้านล่างไปแทนโค้ดเก่า แล้วกด Deploy

import json
import boto3

translate = boto3.client(service_name='translate') 

def lambda_handler(event, context):

    # รับข้อมูลจาก Event 
    input_text = event['queryStringParameters']['input_text']

    response = translate.translate_text(
        Text=input_text,
        SourceLanguageCode="th",
        TargetLanguageCode="en"
    )

    output_text = response.get('TranslatedText')

    # ข้อมูลเกี่ยวกับ return ที่เพิ่มมา ต้องทำตามกฎของ integration response in API Gateway 　https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-integration-settings-integration-response.html
    return {
        'statusCode': 200,
        'body': json.dumps({
            'output_text': output_text
        }),
        'isBase64Encoded': False,
        'headers': {}
    }

หลังจากนี้เราจะมาลองทดสอบกัน

แต่ตอนนี้ตัว test event ที่เราสร้างขึ้นมาตอนแรก ไม่ได้เป็นรูปแบบที่รองรับ Lambda proxy integration เพราะฉนั้นเราจะมาสร้าง test event ใหม่กัน

โดยการกดไปที่ Test Create new event ตามรูปด้านล่าง
Event name: test_proxy
Template : ให้เราเลือก API Gateway AWS Proxy
ในส่วน Event JSON ในด้านล่างให้เราเปลี่ยนข้อความด้านล่างเป็น
"foo": "bar" > "input_text": "{ข้อความที่เราอยากแปล}"

แล้วกด Save

ทำการกด Test ดู จะเห็นว่าได้คำแปลแล้ว

คราวนี้เราจะกลับไปที่ API Gateway เพื่อทดสอบกันต่อ

กลับมาที่ API Gateway

ลอง Test จากหน้าต่าง Console

รอบนี้ผมจะพาทุกคนลองรันคำสั่งจากฝั่ง API Gateway กันมั่งครับ

มาที่ฟังก์ชันของเรา ไปที่ GET > Test

จากนั้นลองพิมพ์

input_text=คำที่เราอยากจะแปล

ตามภาพด้านล่าง

แล้วกด Test ดูครับ

ถ้าได้ผลลัพท์ตามภาพด้านล่างถือว่าโอเคครับ

ลอง Test จากหน้าต่าง Url

บริเวณขวาบน คลิก Deploy API

Stage: *New stage*
Stage name: dev

แล้วกด Deploy

ไปที่ Stage GET แล้วทำการ Copy Url ของเรา

ให้เราเพิ่มสิ่งต่อไปนี้ต่อท้าย URL ที่เรา Copy

# เพิ่มสิ่งต่อไปนี้ต่อท้าย
?input_text={คำที่เราอยากจะแปล}

# เช่น
?input_text=กล้วยหอมจอมซน

# พอเอาไปรวมกับ url ที่เราสร้างมาจะได้ตามล่างนี้
https://xxxxxxxxx.execute-api.ap-southeast-1.amazonaws.com/dev/translate?input_text=กล้วยหอมจอมซน

และเมื่อเราเอา url นี้ไปเปิด จะได้คำแปลที่เราพิมพ์เข้าไปครับ
ถ้าได้ตามภาพด้านล่างถือว่าโอเคครับ

พอมาถึงจุดนี้แล้ว ผมหวังว่าผู้อ่านพอจะเห็นภาพ API Gateway กันแล้ว สำหรับส่วนของ API Gateway ในบทความนี้ถือว่าเสร็จแค่นี้ครับ

ทิ้งท้าย

บทความนี้เราสามารถแปลจากการใช้ API กันไปแล้ว
ในบทความต่อไปเราจะทำการเก็บประวัติการแปลของเราไปยัง DynamoDB กันครับ

กรุณาอดใจรอพาร์ทต่อไปในเร็วๆนี้ครับ

บทความ Part อื่นๆ

• ใช้ AWS Lambda เรียกใช้งาน Amazon Translate แปลภาษา : Part 1 | DevelopersIO
• ใช้ API Gateway เชื่อมต่อไปยัง Lambda เรียก API แปลภาษา : Part 2 | DevelopersIO
• ใช้ DynamoDB บันทึกข้อมูลจาก Lambda : Part 3 | DevelopersIO
• แก้ ensure_ascii=False เพื่อให้แปลภาษาอังกฤษ > ไทย แล้วตัวอักษรไม่เพี้ยน : Part 4 | DevelopersIO
• เพิ่มตัวแปรให้เพิ่มรูปแบบการแปลได้หลากหลายมากขึ้น : Part 5 | DevelopersIO
• ดาวน์โหลดโค้ด Front-end และ ตั้งค่า CORS : Part 6 | DevelopersIO
• เพิ่มฟังก์ชัน History ให้สามารถเรียกดูปะวัติการแปลได้ : Part 7 | DevelopersIO
• อัพโหลดเว็บไซต์ขึ้นบน S3 (Hosting Server) : Part 8 | DevelopersIO

บทความอ้างอิง

• AWS Lambda คืออะไร? การแนะนำฟังก์ชันล่าสุดของ AWS | DevelopersIO
• Amazon API Gateway | การจัดการ API | Amazon Web Services